<script setup lang="ts">
  import { ref, watch, defineEmits } from 'vue';
  import TopInput from './components/top-input.vue';
  import TopTable from './components/top-table.vue';
  import TopInputTwo from './components/top-input-two.vue';
  import TopTableTwo from './components/top-table-two.vue';
  import TopInputThree from './components/top-input-three.vue';
  import TopTableThree from './components/top-table-three.vue';
  import BottomTable from './components/bottom-table.vue';

  const emit = defineEmits(['updateTableData']);
  const tableData = ref<any>('');
  watch(
    tableData,
    () => {
      emit('updateTableData', tableData.value);
    },
    { deep: true }
  );
  const tableDataTwo = ref<any>('');
  watch(
    tableDataTwo,
    () => {
      emit('updateTableData', tableDataTwo.value);
    },
    { deep: true }
  );
  const tableDataThree = ref<any>('');
  watch(
    tableDataThree,
    () => {
      emit('updateTableData', tableDataThree.value);
    },
    { deep: true }
  );
</script>

<template>
  <div class="flow-query">
    <a-card>
      <template #title>
        <div class="card-title">工作包拆包(非工艺更改)</div>
      </template>
      <div class="content">
        <a-tabs type="card">
          <a-tab-pane key="1">
            <template #title> <icon-calendar /> 拆包(拆包物料放箱子) </template>
            <TopInput @update-array="tableData = $event" />
            <TopTable :table-data="tableData" />
            <BottomTable />
          </a-tab-pane>
          <a-tab-pane key="2">
            <template #title> <icon-clock-circle /> 拆包不叫盘</template>
            <TopInputTwo @update-array="tableDataTwo = $event" />
            <TopTableTwo :table-data="tableDataTwo" />
          </a-tab-pane>
          <a-tab-pane key="3">
            <template #title> <icon-user /> 配送拆包 </template>
            <TopInputThree @update-array="tableDataThree = $event" />
            <TopTableThree :table-data="tableDataThree" />
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
  </div>
</template>

<style scoped>
  .flow-query {
    margin: 0px;
    padding: 10px;
    height: 100%;
  }
  .card-title {
    font-size: 24px;
  }
  .content {
    display: flex;
    flex-direction: column;
  }
</style>
